<template>
    <div class="content">
        <van-row class="top-total">
            <van-col class="total-item" span="8">
                <van-row class="total-div bd-oranged">
                    <van-col class="color-orange" span="6">
                        <van-icon name="friends" class="bd-oranged"/>
                    </van-col>
                    <van-col class="color-orange" span="18">密接人员</van-col>
                    <van-col class="bg-orange fz14" span="24">{{focusList.contact_num}}</van-col>
                    <van-col class="bg-orange compare" span="24">较昨日{{focusList.contact_num}}人</van-col>
                </van-row>
            </van-col>
            <van-col class="total-item" span="8">
                <van-row class="total-div bd-blue">
                    <van-col class="color-blue" span="6">
                        <van-icon name="friends" class="bd-blue"/>
                    </van-col>
                    <van-col class="color-blue" span="18">各类人员</van-col>
                    <van-col class="bg-blue fz14" span="24">{{focusList.allkind_num}}</van-col>
                    <van-col class="bg-blue compare" span="24">发热{{focusList.allkind_num_hot}}人</van-col>
                </van-row>
            </van-col>
            <van-col class="total-item" span="8">
                <van-row class="total-div bd-purple">
                    <van-col class="color-purple" span="6">
                        <van-icon name="friends" class="bd-purple"/>
                    </van-col>
                    <van-col class="color-purple" span="18">重点人员</van-col>
                    <van-col class="bg-pink fz14" span="24">{{focusList.focus_num}}</van-col>
                    <van-col class="bg-pink compare" span="24">较昨日{{focusList.focus_num_last}}人</van-col>
                </van-row>
            </van-col>
        </van-row>
        <div class="title-item">
            <span>流行病学调查</span>
        </div>
        <div class="chart-div">
            <van-row>
                <van-col span="12">
                    <div id="qzbl" class="chart-item-1"></div>
                </van-col>
                <van-col span="12">
                    <div id="ysbl" class="chart-item-1"></div>
                </van-col>
            </van-row>
            <div class="divider mb10"></div>
        </div>
        <van-tabs type="card">
            <van-tab title="重点人群">
                <div class="table-div">
                    <van-row class="table-item">
                        <van-col span="4">区县(市)</van-col>
                        <van-col span="4">浙江温州</van-col>
                        <van-col span="4">湖北武汉</van-col>
                        <van-col span="5">湖北非武汉</van-col>
                        <van-col span="4">其他地区</van-col>
                        <van-col span="3">合计</van-col>
                    </van-row>
                    <van-row class="table-item" v-for="(item) in zdList" :key="item.id" >
                        <van-col span="4">{{item.country_name}}</van-col>
                        <van-col span="4">{{item.zjwz_num}} </van-col>
                        <van-col span="4">{{item.hbwh_num}} </van-col>
                        <van-col span="5">{{item.hbfwh_num}} </van-col>
                        <van-col span="4">{{item.qtsc_num}} </van-col>
                        <van-col span="3">{{item.zjwz_num + item.hbwh_num + item.hbfwh_num + item.qtsc_num}}</van-col>
                    </van-row>
                    <van-row class="table-item">
                        <van-col span="4">合计</van-col>
                        <van-col span="4">{{focusNum.zjwz_num}} </van-col>
                        <van-col span="4">{{focusNum.hbwh_num}} </van-col>
                        <van-col span="5">{{focusNum.hbfwh_num}} </van-col>
                        <van-col span="4">{{focusNum.qtsc_num}} </van-col>
                        <van-col span="3">{{focusNum.zjwz_num + focusNum.hbwh_num + focusNum.hbfwh_num + focusNum.qtsc_num}}</van-col>
                    </van-row>
                </div>
            </van-tab>
            <van-tab title="发热排查">
                <div class="table-div">
                    <van-row class="table-item">
                        <van-col span="12">区县(市)</van-col>
                        <van-col span="12">发热人数</van-col>
                    </van-row>
                    <van-row class="table-item" v-for="(item) in emphasisList" :key="item.id">
                        <van-col span="12">{{item.county_name}}</van-col>
                        <van-col span="12">{{item.hot_num}}</van-col>
                    </van-row>
                    <van-row class="table-item">
                        <van-col span="12">合计</van-col>
                        <van-col span="12">{{hotNumSum}}</van-col>
                    </van-row>
                </div>
            </van-tab>
            <van-tab title="社区(村)">
                <div class="table-div">
                    <van-row class="table-item">
                        <van-col span="6">区县(市)</van-col>
                        <van-col span="6">村人数</van-col>
                        <van-col span="6">社区人数</van-col>
                        <van-col span="6">合计</van-col>
                    </van-row>
                    <van-row class="table-item" v-for="(item) in emphasisList" :key="item.id">
                        <van-col span="6">{{item.county_name}}</van-col>
                        <van-col span="6">{{item.village_num}}</van-col>
                        <van-col span="6">{{item.community_num}}</van-col>
                        <van-col span="6">{{item.crosswiseList}}</van-col>
                    </van-row>
                    <van-row class="table-item">
                        <van-col span="6">合计</van-col>
                        <van-col span="6">{{villageNumSum}}</van-col>
                        <van-col span="6">{{communityNumSum}}</van-col>
                        <van-col span="6">{{villageNumSum + communityNumSum}}</van-col>
                    </van-row>
                </div>
            </van-tab>
            <van-tab title="人口流动">
                <div class="table-div">
                    <van-row class="table-item">
                        <van-col span="8">区县(市)</van-col>
                        <van-col span="8">流出人数</van-col>
                        <van-col span="8">流入人数</van-col>
                    </van-row>
                    <van-row class="table-item" v-for="(item) in emphasisList" :key="item.id">
                        <van-col span="8">{{item.county_name}}</van-col>
                        <van-col span="8">{{item.out_num}}</van-col>
                        <van-col span="8">{{item.in_num}}</van-col>
                    </van-row>
                    <van-row class="table-item" >
                        <van-col span="8">合计</van-col>
                        <van-col span="8">{{outNumSum}}</van-col>
                        <van-col span="8">{{inNumSum}}</van-col>
                    </van-row>
                </div>
            </van-tab>
        </van-tabs>
        <div class="title-item">
            <span>重点区域来沈人员</span>
        </div>
        <div class="return">
            <div class="return-div">
                <van-row class="return-item fz12">
                        <van-icon name="manager"/>
                </van-row>
                <van-row class="return-item fz12">
                    <van-col span="12"><div  class="bd-blue-2"><van-row><van-col span="24">湖北：{{zdqyList.hub_num}}</van-col></van-row></div></van-col>
                    <van-col span="12"><div  class="bd-blue-2"><van-row><van-col span="24">浙江：{{zdqyList.zj_num}}</van-col></van-row></div></van-col>
                    <van-col span="12"><div  class="bd-blue-2"><van-row><van-col span="24">北京：{{zdqyList.bj_num}}</van-col></van-row></div></van-col>
                    <van-col span="12"><div  class="bd-blue-2"><van-row><van-col span="24">安徽：{{zdqyList.anh_num}}</van-col></van-row></div></van-col>
                    <van-col span="12"><div  class="bd-blue-2"><van-row><van-col span="24">河北：{{zdqyList.heb_num}}</van-col></van-row></div></van-col>
                    <van-col span="12"><div  class="bd-blue-2"><van-row><van-col span="24">河南：{{zdqyList.hen_num}}</van-col></van-row></div></van-col>
                    <van-col span="12"><div  class="bd-blue-2"><van-row><van-col span="24">吉林：{{zdqyList.jl_num}}</van-col></van-row></div></van-col>
                    <van-col span="12"><div  class="bd-blue-2"><van-row><van-col span="24">山东：{{zdqyList.sd_num}}</van-col></van-row></div></van-col>
                    <van-col span="12"><div  class="bd-blue-2"><van-row><van-col span="24">黑龙江：{{zdqyList.hlj_num}}</van-col></van-row></div></van-col>
                    <van-col span="12"><div  class="bd-blue-2"><van-row><van-col span="24">广东：{{zdqyList.gd_num}}</van-col></van-row></div></van-col>
                    <van-col span="12"><div  class="bd-blue-2"><van-row><van-col span="24">湖南：{{zdqyList.hun_num}}</van-col></van-row></div></van-col>
                    <van-col span="12"><div  class="bd-blue-2"><van-row><van-col span="24">内蒙：{{zdqyList.nm_num}}</van-col></van-row></div></van-col>
                </van-row>
            </div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>国外来沈人员</span>
        </div>
        <div class="table-div">
            <van-row class="table-item">
                <van-col span="4">国家</van-col>
                <van-col span="4">累计人数</van-col>
                <van-col span="4">解除隔离</van-col>
                <van-col span="4">检测样本</van-col>
                <van-col span="4">阳性</van-col>
                <van-col span="4">当日来沈</van-col>
            </van-row>
            <van-row class="table-item" v-for="(item) in foreignList" :key="item.id">
                <van-col span="1">{{item.project}}</van-col>
                <van-col span="4">{{item.total_lj}}</van-col>
                <van-col span="4">{{item.remove_isolation_lj}}</van-col>
                <van-col span="4">{{item.sample_size_lj}}</van-col>
                <van-col span="4">{{item.positive_lj}}</van-col>
                <van-col span="4">{{item.total_dr}}</van-col>
            </van-row>
            <div class="divider"></div>
        </div>
        <div class="chart-div">
            <div class="chart-item">
                <dv-full-screen-container style="width: 100% !important;">
                    <dv-flyline-chart :config="config" style="width:100%;height:300px;" />
                </dv-full-screen-container>
            </div>
            <div class="divider"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>出入沈人员趋势图</span>
        </div>
        <div class="chart-div">
            <van-row>
                <van-col span="24">
                    <div id="crsryqst" class="chart-item-2" style="height:300px;"></div>
                </van-col>
            </van-row>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>溯源接触者</span>
        </div>
        <div class="chart-div">
            <van-row>
                <van-col span="12">
                    <div id="syjcz_1" class="chart-item-2"></div>
                </van-col>
                <van-col span="12">
                    <div id="syjcz_2" class="chart-item-2"></div>
                </van-col>
            </van-row>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>核酸检测</span>
        </div>
        <div class="chart-div">
            <div id="hsjc_1" class="chart-item-3"></div>
            <div id="hsjc_2" class="chart-item-3"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>疫区疫点</span>
        </div>
        <div class="chart-div">
            <div id="yqyd" class="chart-item-3"></div>
            <div class="divider"></div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import { emphasisPersonList, zdpeopleqkList, ldqkList, zdpeoplefbList, qxqkList, zdqylsqkList, foreignComeList, syjczList, hsjconeList, hejctwoList } from '@/api/focus-group'
import { Dialog } from 'vant'
export default {
  name: 'index',
  data () {
    return {
      // 密接，各类，重点
      focusList: [],

      // 流行病学调查 环形图
      ldList: [],

      // 重点人群
      zdList: [],
      // 重点人群
      focusNum: {
        zjwz_num: 0,
        hbwh_num: 0,
        hbfwh_num: 0,
        qtsc_num: 0
      },
      // 发热，社区村，人口流动
      emphasisList: [],
      // 发热人数
      hotNumSum: 0,
      // 村人数合计
      villageNumSum: 0,
      // 社区人数合计
      communityNumSum: 0,
      // 社区人数横向集合
      crosswiseList: 0,
      // 流出人数合计
      outNumSum: 0,
      // 流入人数合计
      inNumSum: 0,

      // 重点区域来沈情况
      zdqyList: [],

      // 国外来沈
      foreignList: [],

      // 流入流出沈阳折线图 流入
      focusInList: [],
      // 流入流出沈阳折线图 流出
      focusOutList: [],
      // 流入流出沈阳折线图 日期
      timeList: [],

      // 溯源接触者饼形图
      syjcList: [],

      // 核酸检测柱状图1 类型
      numTypeOneList: [],
      // 核酸检测柱状图1 数值
      numberOneList: [],
      // 核酸检测柱状图2 类型
      numTypeTwoList: [],
      // 核酸检测柱状图2 数值
      numberTwoList: [],

      // 疫区疫点柱状图 区县
      countyNameList: [],
      // 疫区疫点柱状图 疫区疫点数量
      epidemicNumList: [],

      config: {
        centerPoint: [0.85, 0.35],
        points: [
          [0.9, 0.2],
          [0.2, 0.29],
          [0.59, 0.35],
          [0.2, 0.6],
          [0.35, 0.5],
          [0.5, 0.8],
          [0.6, 0.6],
          [0.5, 0.6],
          [0.7, 0.6],
          [0.7, 0.82],
          [0.65, 0.7],
          [0.8, 0.6],
          [0.8, 0.7]
        ],
        flylineColor: 'blue',
        bgImgUrl: 'https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1583908495000/map.jpg'
      }
    }
  },
  methods: {
    timestampToTime (timestamp) {
      let date = new Date(timestamp)// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + '-'
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return Y + M + D + h + m + s
    },
    qzbl (ldList) {
      let myChart = echarts.init(document.getElementById('qzbl'))
      // 指定图表的配置项和数据
      let confirm_tube = (ldList == null || ldList.length === 0 ? 0 : ldList[0].confirm_tube)
      let confirm_screen = (ldList == null || ldList.length === 0 ? 0 : ldList[0].confirm_screen)
      let confirm_confirm = (ldList == null || ldList.length === 0 ? 0 : ldList[0].confirm_confirm)

      let option = {
        title: {
          text: '确认病例流调发现密切者',
          left: 'center',
          top: 10,
          textStyle: {
            fontSize: '12px',
            color: '#c23531'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: ' {b}: <br /> {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          bottom: 10,
          data: ['在管', '排除', '确诊']
        },
        color: [ '#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '45%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '16',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: confirm_screen, name: '排除' },
              { value: confirm_tube, name: '在管' },
              { value: confirm_confirm, name: '确诊' }

            ]
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    ysbl (ldList) {
      let myChart = echarts.init(document.getElementById('ysbl'))
      // 指定图表的配置项和数据
      let suspect_tube = (ldList == null || ldList.length === 0 ? 0 : ldList[0].suspect_tube)
      let suspect_screen = (ldList == null || ldList.length === 0 ? 0 : ldList[0].suspect_screen)
      let suspect_confirm = (ldList == null || ldList.length === 0 ? 0 : ldList[0].suspect_confirm)

      let option = {
        title: {
          text: '疑似病例流调发现密切者',
          left: 'center',
          top: 10,
          textStyle: {
            fontSize: '12px',
            color: '#c23531'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: ' {b}: <br /> {c} ({d}%)'
        },
        color: [ '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        legend: {
          // orient: 'vertical',
          bottom: 10,
          data: ['在管', '排除', '确诊']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '45%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '16',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: suspect_screen, name: '排除' },
              { value: suspect_tube, name: '在管' },
              { value: suspect_confirm, name: '确诊' }
            ]
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    syjcz_1 (syjcList) {
      let myChart = echarts.init(document.getElementById('syjcz_1'))
      // 指定图表的配置项和数据
      let s_n = (syjcList == null || syjcList.length === 0 ? 0 : syjcList[0].s_n)
      let other_num = (syjcList == null || syjcList.length === 0 ? 0 : syjcList[0].other_num)

      let option = {
        title: {
          text: '市防指核查人员',
          left: 'center',
          top: 10,
          textStyle: {
            fontSize: '12px',
            color: '#c23531'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: ' {b}: <br /> {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          bottom: 10,
          data: ['沈阳市人数', '其他市人数']
        },
        color: [ '#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            center: ['50%', '45%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '16',
                  color: '#FFF',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: s_n, name: '沈阳市人数' },
              { value: other_num, name: '其他市人数' }
            ]
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    syjcz_2 (syjcList) {
      let myChart = echarts.init(document.getElementById('syjcz_2'))
      // 指定图表的配置项和数据
      let contact_num = (syjcList == null || syjcList.length === 0 ? 0 : syjcList[0].contact_num)
      let confirm_num = (syjcList == null || syjcList.length === 0 ? 0 : syjcList[0].confirm_num)

      let option = {
        title: {
          text: '省公安厅核查人员',
          left: 'center',
          top: 10,
          textStyle: {
            fontSize: '12px',
            color: '#c23531'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: ' {b}: <br /> {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          bottom: 10,
          data: ['疫情关联人', '确诊接触者']
        },
        color: [ '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            center: ['50%', '45%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '16',
                  color: '#FFF',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: contact_num, name: '疫情关联人' },
              { value: confirm_num, name: '确诊接触者' }
            ]
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    hsjc_1 () {
      let myChart = echarts.init(document.getElementById('hsjc_1'))
      // 指定图表的配置项和数据

      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '15',
          right: '20',
          bottom: '0',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: this.numTypeOneList
        },
        series: [
          {
            type: 'bar',
            data: this.numberOneList,
            color: '#37a2da'
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    hsjc_2 () {
      let myChart = echarts.init(document.getElementById('hsjc_2'))
      // 指定图表的配置项和数据

      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '15',
          right: '20',
          bottom: '10%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: this.numTypeTwoList
        },
        series: [
          {
            type: 'bar',
            data: this.numberTwoList,
            color: '#32c5e9'
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    yqyd () {
      let myChart = echarts.init(document.getElementById('yqyd'))
      // 指定图表的配置项和数据
      let option = {
        xAxis: {
          type: 'category',
          data: this.countyNameList
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: '15',
          right: '20',
          bottom: '10%',
          top: '10%',
          containLabel: true
        },
        series: [{
          data: this.epidemicNumList,
          type: 'bar',
          color: '#67e0e3'
        }]
      }
      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    crsryqst () {
      let myChart = echarts.init(document.getElementById('crsryqst'))
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['入沈人员', '出沈人员'],
          bottom: 10
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.timeList
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '入沈人员',
            type: 'line',
            data: this.focusInList
          },
          {
            name: '出沈人员',
            type: 'line',
            data: this.focusOutList
          }
        ]
      }
      myChart.setOption(option)
    },
    // 密接，各类，重点
    // focusCrowdList () {
    //   zdpeopleqkList().then(ret => {
    //     if (ret.data.errcode === 0) {
    //       this.focusList = ret.data.data[0]
    //     } else {
    //       Dialog.alert({
    //         message: ret.data.errmsg
    //       }).then(() => {
    //         // on close
    //       })
    //     }
    //   })
    // },
    // 重点人员
    zdpeoplefbList () {
      zdpeoplefbList().then(ret => {
        if (ret.data.errcode === 0) {
          this.zdList = ret.data.data
          this.zdList.forEach((n) => {
            n.imp_date = this.timestampToTime(n.imp_date)
            this.focusNum.zjwz_num += Number(n.zjwz_num)
            this.focusNum.hbwh_num += Number(n.hbwh_num)
            this.focusNum.hbfwh_num += Number(n.hbfwh_num)
            this.focusNum.qtsc_num += Number(n.qtsc_num)
          })
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
    },
    // 发热，社区村，人口流动
    emphasisStatisticsList () {
      qxqkList().then(ret => {
        if (ret.data.errcode === 0) {
          this.emphasisList = ret.data.data
          this.emphasisList.forEach((n) => {
            this.hotNumSum += Number(n.hot_num)
            this.villageNumSum += Number(n.village_num)
            this.communityNumSum += Number(n.community_num)
            n.crosswiseList = n.village_num + n.community_num
            this.outNumSum += Number(n.out_num)
            this.inNumSum += Number(n.in_num)
            n.imp_date = this.timestampToTime(n.imp_date)
          })
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
    },
    // 流行病学调查环形图
    ldqkList () {
      ldqkList().then(ret => {
        if (ret.data.errcode === 0) {
          this.ldList = ret.data.data
          this.ldList.forEach((n) => {
            n.imp_date = this.timestampToTime(n.imp_date)
            this.qzbl(this.ldList)
            this.ysbl(this.ldList)
          })
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
    },
    // 重点区域来沈情况
    zdqylsqkList () {
      zdqylsqkList().then(ret => {
        if (ret.data.errcode === 0) {
          this.zdqyList = ret.data.data[0]
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
    },
    // 国外来沈
    foreignComeList () {
      foreignComeList().then(ret => {
        if (ret.data.errcode === 0) {
          this.foreignList = ret.data.data
          this.foreignList.forEach((n) => {
            n.imp_date = this.timestampToTime(n.imp_date)
          })
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
    },
    // 流入流出沈阳折线图
    getOutComeOnList () {
      zdpeopleqkList().then(ret => {
        if (ret.data.errcode === 0) {
          this.getOutList = ret.data.data
          this.getOutList.forEach((n) => {
            this.focusInList.push(n.focus_in)
            this.focusOutList.push(n.focus_out)
            this.timeList.push(n.time)
            n.imp_date = this.timestampToTime(n.imp_date)
          })
          this.crsryqst()
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
    },
    // 溯源接触者
    syjczList () {
      syjczList().then(ret => {
        if (ret.data.errcode === 0) {
          this.syjcList = ret.data.data
          this.syjcList.forEach((n) => {
            n.imp_date = this.timestampToTime(n.imp_date)
          })
          this.syjcz_1(this.syjcList)
          this.syjcz_2(this.syjcList)
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
          })
        }
      })
    },
    // 核酸检测情况1
    hsjconeList () {
      hsjconeList().then(ret => {
        if (ret.data.errcode === 0) {
          this.hsOneList = ret.data.data
          this.hsOneList.forEach((n) => {
            n.imp_date = this.timestampToTime(n.imp_date)
            this.numTypeOneList.push(n.num_type)
            this.numberOneList.push(n.number)
          })
          this.hsjc_1()
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
          })
        }
      })
    },
    // 核酸检测情况2
    hejctwoList () {
      hejctwoList().then(ret => {
        if (ret.data.errcode === 0) {
          this.heTwoList = ret.data.data
          this.heTwoList.forEach((n) => {
            n.imp_date = this.timestampToTime(n.imp_date)
            this.numTypeTwoList.push(n.num_type)
            this.numberTwoList.push(n.number)
          })
          this.hsjc_2()
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
          })
        }
      })
    },
    // 疫区疫点
    epidemicSiteList () {
      qxqkList().then(ret => {
        if (ret.data.errcode === 0) {
          this.epidemicList = ret.data.data
          this.epidemicList.forEach((n) => {
            n.imp_date = this.timestampToTime(n.imp_date)
            this.countyNameList.push(n.county_name)
            this.epidemicNumList.push(n.epidemic_num)
          })
          this.yqyd()
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
          })
        }
      })
    },
    // 头部
    emphasisPersonList () {
      emphasisPersonList().then(({ data }) => {
        let { data: res, errcode, errmsg } = data
        if (errcode === 0) {
          this.focusList = res[0]
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
    }
  },
  mounted () {
    this.qzbl()
    this.ysbl()
    this.zdpeoplefbList()
    this.ldqkList()
    this.emphasisStatisticsList()
    this.zdqylsqkList()
    this.foreignComeList()
    this.getOutComeOnList()
    this.syjczList()
    this.hsjconeList()
    this.hejctwoList()
    this.epidemicSiteList()
    this.emphasisPersonList()
    // this.focusCrowdList()
  }
}
</script>

<style scoped>
    .content{
        background-color: #efefef;
    }
    .chart-item-3{
        width: 100%;
        height: 140px;
    }
    .chart-item-2{
        width: 100%;
        height: 200px;
    }
    .chart-item-1{
        width: 100%;
        height: 180px;
    }
    .chart-item{
        width: 100%;
        height: 240px;
    }
    .title-item{
        padding: 10px;
        font-size: 14px;
        color: #333333;
    }
    .title-item span{
        border-left: 5px solid #8b0000;
        padding-left: 5px;
    }
    .table-item{
        font-size: 10px;
        text-align: center;
        padding: 0 5px;
        border: 1px solid #dddddd;
        border-top: 0;
    }
    .table-item:first-child{
        border-top: 1px solid #dddddd;
    }
    .table-item:nth-child(2n+1){
        background: #ffffff;
    }
    .table-div{
        padding: 0 10px;
    }
    .van-col {
        padding: 10px 0;
    }
    .content >>> .van-progress__pivot{
        background-color: initial !important;
        color: #ffffff;
    }
    /*.content >>> .van-progress{*/
    /*    background-color: #dddddd;*/
    /*}*/
    .van-tag{
        margin-right: 1px;
    }
    .top-total{
        padding: 20px 8px 0 8px;
    }
    .color-oranged{
        color: orangered;
    }
    .color-orange{
        color: orange;
    }
    .color-green{
        color: rgb(40, 183, 163);
    }
    .color-gray{
        color: gray;
    }
    .color-blue{
        color: #c2f3f3;
    }
    .color-purple{
        color: purple;
    }
    .bg-oranged{
        background-color: orangered !important;;
    }
    .bg-orange{
        background-color: orange !important;
    }
    .bg-green{
        background-color: rgb(40, 183, 163) !important;;
    }
    .bg-gray{
        background-color: gray !important;;
    }
    .bg-blue{
        background-color: #c2f3f3 !important;;
    }
    .bg-purple{
        background-color: purple !important;
    }
    .bg-pink{
        background-color: #f3c4f3;
    }
    .bd-oranged{
        border-color: orangered !important;;
    }
    .bd-orange{
        border-color: orange !important;;
    }
    .bd-green{
        border-color: rgb(40, 183, 163) !important;;
    }
    .bd-gray{
        border-color: gray !important;;
    }
    .bd-blue{
        border-color: rgb(51, 102, 255) !important;;
    }
    .bd-purple{
        border-color: purple !important;
    }
    .bd-blue-2{
        border-color: #c2f3f3 !important;
    }
    .total-item{
        padding: 2px;
    }
    .total-div{
        border: 1px solid #dddddd;
        padding: 5px;
        text-align: center;
        position: relative;
    }
    .fz12{
        font-size: 12px !important;
    }
    .fz14{
        font-size: 14px !important;
    }
    .total-div .van-col{
        padding: 0;
        font-size: 12px;
    }
    .total-div .fz14{
        padding-top: 10px;
    }
    .total-div .fz14{
        padding-top: 5px;
        font-weight: bold;
    }
    .compare{
        padding-bottom: 5px !important;
    }
    .total-div .van-col--18{
        margin-bottom: 5px;
        text-align: right;
    }
    .van-icon-friends{
        border: 1px solid #dddddd;
        border-radius: 30px;
        font-size: 26px;
        text-align: center;
        padding: 3px;
        position:absolute;
        top: -15px;
        left: 6px;
        background: #ffffff;
    }
    .content >>> .van-tab{
        font-size: 12px;
    }
    .return-item{
        /*padding: 10px;*/
        text-align: center;
    }
    .van-icon-manager{
        font-size: 1.25rem;
    }
    .return-item .bd-oranged,.return-item .bd-blue-2{
        border: 1px solid #dddddd;
        padding: 5px;
    }
    .return-item .van-col{
        padding: 5px;
        text-align: left;
    }
    .return-item .van-col span{
        float: right;
    }
    .return-div{
        background-color: #ffffff;
        padding: 5px;
    }
    #dv-full-screen-container{
        position: initial;
        width: 100% !important;
        margin-top: 10px;
    }
    .chart-div,.return{
        padding: 0 10px;
    }
    .chart-div .van-col{
        padding: 0;
    }
    .chart-div .chart-item-3,.chart-div .chart-item-2,.chart-div .chart-item-1,.chart-div .chart-item{
        background-color: #ffffff;
    }
    .divider{
        width: 100%;
        height: 5px;
        background-color: rgb(204, 204, 204);
        margin-top: 10px;
    }
    .mb10{
        margin-bottom: 10px;
    }
    .content >>> .van-tabs__nav--card{
        margin: 0 10px;
    }
    .table-div{
        padding: 0 10px;
    }
    .table-item{
        font-size: 10px;
        text-align: center;
        padding: 0 5px;
        border: 1px solid #dddddd;
        border-top: 0;
    }
    .van-col.van-col--1{
        width: 16%;
    }
</style>
